<template>
  <div class="sign-up-wrap">
    <div class="content-wrap">
      <div class="sign-up-item">
        <input
          class=" phone"
          type="text" maxlength="11" v-model="mobile"
          placeholder-style="color:#A3AAB7"
          placeholder="请输入11位数字手机号"
        >
      </div>

      <div class="sign-up-item">
        <input
          class="code"
          type="text" v-model="tuxingyanzhengma"
          placeholder-style="color:#A3AAB7"
          placeholder="请输入图形验证码"
        >
        <img :src="captchaSrc" alt="图片验证码" class="captcha-img" @click="loadtupian">
      </div>
      <div class="sign-up-item">
        <input
          class="code"
          type="text" v-model="shoujiyanzhengma"
          placeholder-style="color:#A3AAB7"
          placeholder="请输入手机验证码"
        >
        <span class="captcha-text" @click="getCaptcha"><span class="line"></span>{{captchaText}}</span>
      </div>
      <div
        class="sign-up-item next"
        @click="signIn"
      >下一步</div>
    </div>
    <mytoast ref="mytoast" />
  </div>
</template>

<script>
/**
 * * Index
 */
import api from "@/utils/api";
import mytoast from "@/components/toast";

export default {
  name: "Index",
    components: {mytoast},
  mixins: [],
  props: {},
  data() {
    return {
      captchaText:'获取验证码',
      cooldown:false, //60s验证时间
      count:60,
      step:1, //注册步骤,
        mobile: '',
        tuxingyanzhengma : '',
        shoujiyanzhengma : '',
        con_c : '' ,//图片验证码ID
        captchaSrc : '', //图片验证码路径
        smsId : '',//短信ID

    };
  },
    onShow(){
      this.loadtupian();
    },
  computed: {},
  methods: {
    // 获取验证码
    getCaptcha(){
      if(this.cooldown){
        return
      }else{
        this.cooldown = true
        let count =60
        // 倒计时
        this.setTime(count)
          this.getyanzhengma();
      }
    },
    // 倒计时
    setTime(val){
      // 计时结束
      if(val==0){
        this.captchaText="获取验证码"
        this.cooldown = false;
      }else{
        val--;
        this.captchaText = val +'s后重试';
          // 1000ms执行一次
          setTimeout(() => {
              this.setTime(val)
          }, 1000);
      }

    },
    // 注册下一步：账号验证
    signIn(){
      this.yanzheng();
    },

      loadtupian(){
          var _this = this;
          var requestTask = wx.request({
              url: api.captchaImage ,
              header: {
                  "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              responseType: 'arraybuffer',
              data: {
              },
              success(res) {
                  console.log(res);
                  var base64 = wx.arrayBufferToBase64(res.data);
                  _this.captchaSrc = "data:image/jpeg;base64," + base64
              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
          requestTask.onHeadersReceived((res) => {
              if (res.header && res.header["con_c"]){
                  _this.con_c = res.header["con_c"];
              }
          })
      },

      getyanzhengma(){
          var _this = this;
          if(!_this.con_c || !_this.tuxingyanzhengma){
              _this.$refs.mytoast.show("请先输入图片验证码");
              return;
          }
          wx.request({
              url: api.sendCode + "?con_c="+this.con_c,
              header: {
                  "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              data: {
                  mobile : _this.mobile,
                  validCode : _this.tuxingyanzhengma,
                  tag : "11"
              },
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      return ;
                  }
                  _this.smsId = res.data.data;
                  wx.setStorageSync("smsId", _this.smsId);
              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
              },
              complete(){
              }
          });
      },

      yanzheng(){
          var _this = this;
          if(!_this.mobile){
              _this.$refs.mytoast.show("请输入正确的手机号码");
              return;
          }
          if(!_this.tuxingyanzhengma){
              _this.$refs.mytoast.show("请输入图片验证码");
              return;
          }
          if(!_this.shoujiyanzhengma){
              _this.$refs.mytoast.show("请输入短信验证码");
              return;
          }
          wx.request({
              url: api.checkCode,
              header: {
                  "Content-Type": "application/x-www-form-urlencoded"
              },
              method: "POST",
              data: {
                  mobile : _this.mobile,
                  code : _this.shoujiyanzhengma,
                  uuid : wx.getStorageSync("smsId"),
                  tag : "11"
              },
              success(res) {
                  console.log(res);
                  if(res.data.code != 200){
                      _this.$refs.mytoast.show(res.data.msg);
                      _this.loadtupian();
                      return ;
                  }
                  wx.setStorageSync("smsCode", _this.shoujiyanzhengma);
                  wx.setStorageSync("smsMobile", _this.mobile);
                  var url = "../signUpUser/main";
                  mpvue.navigateTo({ url });
              },
              fail(res) {
                  console.log(res);
                  _this.$refs.mytoast.show("网络异常");
                  _this.loadtupian();
              },
              complete(){
                 // var url = "../signUpUser/main";
                 // mpvue.navigateTo({ url });
              }
          });
      }
  }
};
</script>
<style  scoped>
/* 容器 */
.content-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  margin-top: 20%;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
}
/* item项 */
.content-wrap .sign-up-item {
  position: relative;
  box-sizing: border-box;
  display: block;
  width: 80%;
  height: 80rpx;
  line-height: 80rpx;
  margin: 15rpx auto;
  border-radius: 40rpx;
  box-shadow: 0px 1px 6px 0px rgba(0, 119, 255, 0.16);
  overflow: hidden;
}
/* 输入框 */
.content-wrap input {
  box-sizing: border-box;
  display: block;
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  text-align: left;
  padding-left: 40rpx;
  border-radius: 40rpx;
  background: white;
}
/* 验证码占位 */
input.code{
  padding-right: 200rpx;
}

/* 验证码图片 */
.captcha-img{
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width: 200rpx;
  height: 80rpx;
}
/* 验证码 */
.captcha-text{
  position: absolute;
  right: 0;
  top: 0;
  width: 200rpx;
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  color: #0077FF;
  font-size: 14px;
}
.captcha-text .line{
  display: block;
  position: absolute;
  width: 1px;
  height: 40rpx;
  background: #A3AAB7;
  top: 20rpx;
  left:0rpx;
}
/* 按钮 */
.content-wrap div {
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  color: rgba(55, 62, 79, 1);
  text-align: center;
  vertical-align: middle;
}
.content-wrap .next{
  margin-top: 60rpx;
  color: #fff;
  background: linear-gradient(
    -62deg,
    rgba(4, 171, 245, 1),
    rgba(7, 127, 255, 1)
  );
}
.next:active{
  opacity: 0.5;
}
</style>

